(function(){
	var index = {
		
		initialize:function(){
			this.getData();
			this.render();
			this.setStyle();
		},
		
		render:function(){
			var html = $('#tpl').html();
			var fn = _.template(html);
			var tpl = fn({photoName:this.photoName});
			
			$(".main").html(tpl);
		},
		
		getData:function(){
			this.photoName = JSON.parse(localStorage.getItem('photoNameList'));
			this.commonArg = JSON.parse(localStorage.getItem('photoCommonArg'));
		},
		
		setStyle:function(){
			var colInterval = this.commonArg.colInterval+'px';    //列间隔
			var fontSize = this.commonArg.fontSize+'px';     //字体大小
			var fontWeight = this.commonArg.fontWeight;  //字体粗细
			var nameInterval = this.commonArg.nameInterval+'px';   //名字间隔
			var mainTop = this.commonArg.mainTop+'px';      //整体上边距
			
			//每个名字的字体大小，粗细和间隔
			$('h5').css('width',fontSize).css('font-size',fontSize).css('font-weight',fontWeight).css('margin-right',nameInterval);
			
			//整个main的上边距
			$('.main').css('padding-top',mainTop);
			
			//列间距
			$('.main>div').css('margin-bottom',colInterval);
		}
		
	}
	index.initialize();
})();
/*
 数据结构:
1.名字列表:
[
    {
    	namelist:["A","b"],
    	moveLeft:20
    },{
    	namelist:["v","mike"],
    	moveLeft:10
    }
]
2.公共参数:
{
	colInterval:10,    //列间隔
	fontSize:16,       //字体大小
	nameInterval:10    //名字间隔
	mainTop:200        //整体上边距
}

逻辑：
1，获取数据
2，渲染
    <script>
        for(var i=0;i<photoName.length;i++){
        	var item = photoName[i];
        	<div class=<%= "col div"+i %>>
        		for(var k=0;k<item.namelist.length;k++){
        			var itemName = item.namelist[k];
        			<h5><%= itemName %></h5>
        		}
        	</div>
        }
3，js控制增加css
 * */